<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/api.css">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            background-color: #f7f7f7;
        }

        header {
            position: relative;
            height: 44px;
            padding: 0 15px;
            background-color: #e34343;
        }

        header #title {
            line-height: 44px;
            height: 44px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            padding: 0 44px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        header span {
            position: absolute;
            display: block;
            bottom: 0px;
            width: 44px;
            height: 44px;
            background-repeat: no-repeat;
            background-size: 25px;
            background-position: center;
        }

        header .return {
            left: 15px;
            background-image: url('../image/return.png');
        }
    </style>
</head>

<body>
    <header>
        <p id="title"></p>
        <span class="return" tapmode onclick="api.closeWin();"></span>
    </header>
    <section id="main"></section>
    <footer></footer>

    <script src="../script/api.js"></script>
    <script>
        var header, headerH, footer, footerH;
        apiready = function () {
            header = $api.dom('header');
            footer = $api.dom('footer');
            headerH = $api.fixStatusBar(header);
            footerH = $api.fixTabBar(footer);

            $api.text($api.dom('#title'), api.pageParam.title);

            api.openFrame({
                name: api.pageParam.name + 'frm',
                url: api.pageParam.url,
                bounces: true,
                rect: {
                    x: 0,
                    y: headerH,
                    w: api.winWidth,
                    h: api.winHeight - (headerH + footerH)
                },
                pageParam: api.pageParam.extra
            });
        }

    </script>
</body>

</html>